<template>
  <div id="tmpl">
    <div class="comment">
      <h4>评论</h4>
      <hr />
      <textarea placeholder="请输入您的评论" v-model="commentcontent"></textarea>
      <mt-button type="primary" size="large" @click="postcomment">提交</mt-button>
    </div>

   
  <div class="list">
    <h4>评论</h4>
    <hr />
    <div v-for="(item,index) in commentList">
      <div class="title">
        <span>第{{index + 1}}楼</span>
        <span>用户：{{item.user_name}}</span>
        <span>评论时间：{{item.add_time | datefmt("YYYY-MM-DD HH-mm-ss")}}</span>
      </div>
      <ul class="mui-table-view">
        <li class="mui-table-view-cell" v-text="item.content"></li>
      </ul>
    </div>
    <mt-button plain size="large" type="danger" @click="getmore">获取更多</mt-button>
  </div>

  </div>
</template>

<script>
import commom from "../kits/common.js";
import { Toast } from 'mint-ui';
export default {
  data(){
    return {
      commentcontent:"",
      commentList:[],
      pageindex: 1
    }
  },
  props:["id"],
  created(){
    this.getcomment(1);
  },
  methods:{
    getmore(){
      this.pageindex++;
      this.getcomment(this.pageindex);
    },
    postcomment(){
      if(this.commentcontent.trim().length == 0){
        Toast("请输入评论")
        return
      }
      var url = commom.domain + "/api/postcomment/" + this.id;
      this.$http.post(url,{content:this.commentcontent},{emulateJSON:true}).then(function(response){
        if(response.body.status == 0){
          Toast(response.body.message)
          this.commentList.unshift({
            user_name: "匿名用户",
            add_time: Date.now(),
            content:this.commentcontent
            })
          this.commentcontent = ''
        }else{
          Toast(response.body.message)
        }
      })
    },
    getcomment(pageindex){
      pageindex = pageindex || 1;
      var url = commom.domain + "/api/getcomments/"+ this.id +"?pageindex=" + pageindex;
      this.$http.get(url).then(function(response){
        var data = response.body;
        if(data.status != 0){
          Toast(data.message);
          return;
        }
        this.commentList = this.commentList.concat(data.message);
        // Array.prototype.push.apply(this.commentList,data.message);
      })
    }
  }

}
</script>

<style scoped>
.comment{
  padding: 5px;
}

.list{
  padding: 5px;
}
.title{
  color: #6d6d72;
  font-size: 15px;
  background-color: rgba(0,0,0,.1);
  line-height: 36px;
}
</style>
